import React, { memo, useCallback, useEffect, useRef, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { Control, MusicPlayBar, PlayInfo } from './style'
import music from '@/assets/music.mp3'
import img from '@/assets/img/sprite_icon.png'
import { NavLink } from 'react-router-dom'
import { Slider } from 'antd'
import { formatDate, getPlayUrl, getSizeImage } from '@/utils/format-utils'
import { fetchSongDetailAction } from '@/store/modules/musicplayer'
import { shallowEqual, useDispatch } from 'react-redux'
import { useAppSelector } from '@/store'
import PlayList from '../playlist'

interface IProps {
  children?: ReactNode
}

const MusicPlay: FC<IProps> = () => {
  const dispatch = useDispatch()
  const audioRef = useRef<HTMLAudioElement>(null)
  const { songs } = useAppSelector(
    (state) => ({
      songs: state.musicplayer.songs[0]
    }),
    shallowEqual
  )
  // 设置音频src
  useEffect(() => {
    audioRef.current!.src = getPlayUrl(songs?.id)
    audioRef.current!.volume = 0.3
  }, [songs])

  // 默认歌曲 playlist?id=12991895543
  useEffect(() => {
    dispatch(fetchSongDetailAction(1329750332))
  }, [dispatch])

  const [currentTime, setCurrentTime] = useState(0)
  const [progress, setProgress] = useState(0)
  const [isPlay, setPlay] = useState(true)
  // 触发播放
  function timeUpdate(e: any) {
    let currentTime = e.target.currentTime
    if (isPlay) {
      setCurrentTime(currentTime * 1000)
      setProgress(((currentTime * 1000) / songTime) * 100)
    }
  }
  const playMusic = useCallback(() => {
    audioRef.current?.play()
  }, [])
  const picUrl = songs?.al && songs?.al.picUrl
  const songName = songs?.name
  const singerName = songs?.ar && songs?.ar[0]?.name //作者名字
  const songTime = songs?.dt

  const changeSlider = useCallback(
    (value: number) => {
      const songSlider = songTime * (value / 100)
      setCurrentTime(songSlider)
      setProgress(value)
      setPlay(false)
    },
    [songTime]
  )
  const changeComplete = useCallback(
    (value: number) => {
      audioRef.current!.currentTime = (songTime * (value / 100)) / 1000
      setCurrentTime(songTime * (value / 100))
      setPlay(true)
      audioRef.current!.play()
      console.log(value)
    },
    [songTime, audioRef]
  )
  return (
    <div>
      {/* <PlayList></PlayList> */}
      <MusicPlayBar className="sprite_player">
        <div className="wrap-v2  content">
          <Control>
            <button className="sprite_player pre"></button>
            <button className="sprite_player play" onClick={playMusic}></button>
            <button className="sprite_player next"></button>
          </Control>
          <PlayInfo>
            <a className="image" rel="noopener noreferrer" href="/">
              <img src={getSizeImage(picUrl, 35)} alt="" />{' '}
            </a>
            <div className="play-detail">
              <div className="song-info">
                <NavLink to="/discover/song" className="song-name">
                  {songName}
                </NavLink>
                <a href="/author" className="no-link singer-name">
                  {singerName}
                </a>
                <Slider
                  className="slide"
                  defaultValue={0}
                  value={progress}
                  tooltip={{ open: false }}
                  onChange={changeSlider}
                  onChangeComplete={changeComplete}
                ></Slider>
              </div>
            </div>
            <div className="song-time">
              <span className="now-time">
                {formatDate(currentTime, 'mm:ss')}
              </span>
              <span className="total-time">
                / {formatDate(songTime, 'mm:ss')}
              </span>
            </div>
          </PlayInfo>
        </div>
        <audio
          ref={audioRef}
          id="audio"
          onTimeUpdate={timeUpdate}
          preload="auto"
        ></audio>
      </MusicPlayBar>
    </div>
  )
}

export default memo(MusicPlay)
